<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>wedding</title>
		<style>
			* {
				margin: 0;
			}
			/* 通配符选择器 *{} */
			img{
				vertical-align: bottom;
			}
			h1,h2,h3,h4,h5,h6{
				margin: 0;
			}
			/* 左右浮动 */
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.bd{
				border: 1px solid red;
				/* 测试样例 */
			}
			.w{
				width: 1080px;
				margin: 0 auto;
			}
			.header{
				
			}
		/* 	.body div:nth-child(2)
			{
				padding: 15px 0px;
			} */
			.ad1{
				
				padding: 15px 0px;
			}
			.ad2{	
			}
			.banner_ad{
				padding-top: 15px;
			 }
			 .banner_ad div:nth-child(2){
				 padding: 0 15px;
			 }
			 .banner{
				 height: 555px;
				 padding-top: 15px;
			 }
			 /* 样式区 */
			 
			 /* 以下是main区 */
			 .main{
				height: 1258px;
				
			 }
			 .title{
				 border-bottom: 2px solid #f4f3ef;
				 padding-top: 35px;
				 height: 42px;
			 }
			 .title h3{
				 font-family: "黑体";
				 font-size: 24px;
				 line-height: 42px;
			 }
			 .brand{
				 padding-top: 15px ;
				 height: 460px;
				 
			 }
			 .brand .fl{
				 /* width: 259px; */
				padding-right: 15px;
				 
			 }
			 .brand .fl:nth-child(4){
				 padding-right: 0;
			 }
			 /* 以下是styl区 */
			 .style{
				padding-top: 15px;
				height: 700px;
			 }
			 .style_l{
				 padding-right: 20px;
				
			 }
			.style_l .bot{
				padding-top: 15px;
			}
/* 			 .style_l div:nth-child(3n)
			 {
				 padding-right: 0;
			 } */
			 .style_r .fl{
				 
				 padding-bottom: 15px;
				 padding-right: 15px;
			 }
			 /* 以下是实验区 */
			 .shyan{
				 height: 750px;
			 }
			.title_1{
				padding-top: 58px;
			}
			.title_1 h4{
				font-family: "黑体";
				color: #FF0000;
				font-size: 18px;
				line-height: 18px;
			}
			.user .fl:nth-child(2){
				 padding:0 44px;
			 }
			 .user{
				 padding-top: 17px ;
				 height: 83px;				  
			 }
			 .hunqing{
				 
				 padding-top: 15px;
				 height:575px ;
				
			 }
			 .hunqing_l{
				 padding-right: 15px;
			 } 
			.hunqing_l div:nth-child(2){
			 	padding-top: 15px;
				 
				
			 }
			.hunqing_r .fl{
				padding-right: 15px;
			}
			.hunqing_r div:nth-child(3n)
			{
				padding-right: 0;
				padding-bottom: 15px;
			} 
			/* //以下是文字实验 */
			.feather{
					width: 355px;
					height: 220px;
					color: white;
					padding-left: 20px;
					background-color:#ff6783 ;
			}
			.feather h3{
				width: 198px;
				height: 22px;
				padding-top: 19px;
				padding-bottom: 7px;
				font-size: 22px;
			}
			
			.E{
				width: 124px;
				height: 12px;
				font-size: 12px;
				padding-bottom: 21px;
				border-bottom: 3px solid #f57081;
			}
			.end{
				height: 136px;
				padding-top: 21px;
				
			  
			}
			.end .fl{
				line-height: 100%;
				background-color:white ;
				height: 13px;
				padding: 4px 5px 3px 5px;
				color: #f57081;
				font-size: 13px;
				margin: 0px 15px 15px 0px;
				}
			
		</style>
	</head>
	<body>
	<div class="header w">
		<img src="images/header_02.gif" alt="">
	</div>
	<div class="w ad1"><img src="images/header_05.gif" alt=""></div>
	<div class="w ad2"><img src="images/header_07.gif" alt=""></div>
	<!-- 以下是bannner区 -->
	<div class="w banner ">
		<div class="fl banner_l ">
			<!-- 上下结构 -->
			<div><img src="images/case-01_09.gif" alt=""></div>
			<div class="banner_ad">
				<div class="fl"><img src="images/case-01_13.gif" alt=""></div>
				<div class="fl"><img src="images/case-01_15.gif" alt=""></div>
				<div class="fl"><img src="images/case-01_17.gif" alt=""></div>
				<!-- 将垂直布局改成浮动 -->
			</div>
		</div>
		<div class="fr banner_r "><img src="images/case-01_11.gif" alt=""></div>
	</div>
	
	<!-- 以下是main区 -->
	<div class=" w main" >
		
		<div class="title">
			<h3>品牌</h3>
		</div>
		<div class="brand">
			<div class="fl"><img src="images/main_03.gif" alt=""></div>
			<div class="fl"><img src="images/main_05.gif" alt=""></div>
			<div class="fl"><img src="images/main_07.gif" alt=""></div>
			<div class="fl"><img src="images/main_09.gif" alt=""></div>
		</div>
		<div class="title">
			<h3>风格</h3>
		</div>
		<div class=" w style">
			<div class="fl style_l">
				<!-- 上下结构 -->
				<div class=" feather">
					<div class="top" >
						<h3  >
							太原婚纱照精选商家
						</h3>				
						<p class="E">Featured bussinesses</p>
					</div>
					<div class=" end">
						
							<div class=" fl ">太原金夫人</div>
							<div class=" fl ">幸福V摄影</div>
							<div class=" fl ">罗亚摄影</div>
							<div class=" fl ">爱萌18号</div>
							<div class=" fl ">栖溪创意水下摄影</div>
							<div class=" fl ">布拉格</div>
							<div class=" fl ">凯瑟琳摄影</div>
							<div class=" fl ">佳丽新娘婚纱</div>
							<div class=" fl ">爱尚婚纱摄影</div>
							<div class=" fl ">卡罗摄影</div>
					
					</div>
				</div>
				<div class=" bot"><img src="images/style_18.gif" alt=""></div>
			</div>
			<div class="style_r">
				<div class=images/style_05.gif" alt=""></div>
                <div class="fl"><img src="images/style_05.gif" alt=""></div>
				<div class="fl"><img src="images/style_07.gif" alt=""></div>
				<div class="fr"><img src="images/style_09.gif" alt=""></div>
				<div class="fl"><img src="images/style_14.gif" alt=""></div>
				<div class="fl"><img src="images/style_15.gif" alt=""></div>
				<div class="fr"><img src="images/style_16.gif" alt=""></div>
				<div class="fl"><img src="images/style_23.gif" alt=""></div>
				<div class="fl"><img src="images/style_22.gif" alt=""></div>
				<div class="fr"><img src="images/style_24.gif" alt=""></div>
               

			</div>
		</div>
	</div>
	<!-- 以下是实验区 -->
	<div class=" w shiyan" >
		<div>
			
		
		    <div class="title_1">
		    	<h4>用户晒单</h4>
		    </div>
		
		<div class="user"> 
		    <div class="fl"><img src ="images/实验__03.gif" alt=""></div>
		    <div class="fl"><img src ="images/实验__05.gif" alt=""></div>
		    <div class="fl"><img src ="images/shiyan_03.gif" alt=""></div>
		</div>
		</div>
		<!-- 以下是婚庆区 -->
		<div class="title">
			<h3>婚庆</h3>
		</div>
		<div class="w hunqing">
		    <div class="fl hunqing_l">
		         <div ><img src="images/实验__10.gif" alt=""></div>
				 <div><img src="images/jsdbb_03_03.gif" alt=""></div>
		    </div>
		    <div class="  hunqing_r">
			     <div class="fl"><img src="images/实验_30.gif" alt=""></div>
			     <div class="fl"><img src="images/jh_32.gif" alt=""></div>
			     <div class="fl"><img src="images/jh_34.gif" alt=""></div>
			     <div class="fl"><img src="images/jsdbb_03_05.gif" alt=""></div>
			     <div class="fl"><img src="images/jsdbb_03_07.gif" alt=""></div>
			     <div class="fl"><img src="images/jsdbb_03_09.gif" alt=""></div>
		   </div>
   <div class="w end">
		<div><img src="images/com_05.gif" alt=""></div>
	</div>
	</div>
	</body>
</html>
